import React from 'react';
import Mixins from '@/components/Common/mixin';
import TableTool from '@/components/CreateTable/TableTool';
import InfoList, { Title } from '@/components/CreateTable/infoList';
import CreateTable from '@/components/CreateTable';
import { StateType } from '@/common-typings';
import constant from '@/const';

const styles = {
  padding: '15px 0',
  borderBottom: '1px solid #eee',
};

class Details extends Mixins {
  public state = {
    loading1: false,
    loading2: false,
    loading3: false,
  };

  componentDidMount(): void {
    const { dispatch, detailData } = this.props;
    if (dispatch) {
      dispatch({
        type: 'agentReview/getUserManageDetail',
        payload: {
          userId: detailData.userId,
        },
      });
    }
  }

  /**
   * 渲染账户详情
   */
  renderAccountInfo = (isFirstLayout = true) => {
    const { agentReview } = this.props;
    const { detail } = agentReview;
    const config = [
      { label: '申请帐户', id: 'username' },
      {
        label: '帐户类型',
        id: 'userType',
        render: (text: any) => {
          if (typeof text === 'number') {
            return constant.ACCOUNT_TYPE.filter((i: StateType) => i.value === text)[0].label;
          }
          return '--';
        },
      },
      { label: '注册时间', id: 'registerDate', formatTimeStamp: true },
      { label: '姓名', id: 'reallyName' },
      { label: '手机', id: 'telephone' },
      { label: 'e-mail', id: 'email' },
      { label: '注册网址', id: 'registerDomain' },
      {
        label: '注册端口',
        id: 'clientType',
        render: (text: number) => {
          if (typeof text === 'number') {
            return constant.DEVICE_TYPE.filter((i: StateType) => i.value === text)[0].label;
          }
          return '--';
        },
      },
      { label: '注册IP', id: 'registerIp' },
    ];

    config.forEach((item: StateType) => {
      if (detail.hasOwnProperty(item.id)) {
        item.value = detail[item.id];
      }
    });

    return (
      <div style={styles}>
        <Title>账户信息</Title>
        <InfoList config={config} isFirstLayout={isFirstLayout} />
      </div>
    );
  };

  /**
   * 申请信息
   */
  renderApplyInfo = () => {
    const { detailData } = this.props;
    const config = [
      { label: '申请人', id: 'creator' },
      {
        label: '操作类型',
        id: 'optDesc',
        // render: (text: number) =>
        //   constant.MEMBER_REVIEW_AUDIT_TYPE.filter(i => i.value === text)[0].label || '--',
      },
      { label: '申请时间', id: 'createTime', formatTimeStamp: true },
    ];

    config.forEach((item: StateType) => {
      if (detailData.hasOwnProperty(item.id)) {
        item.value = detailData[item.id];
      }
    });

    return (
      <div style={styles}>
        <Title>申请信息</Title>
        <InfoList config={config} />
      </div>
    );
  };

  /**
   * 操作内容
   */
  renderOperateInfo = () => {
    const { detailData, getOptData } = this.props;

    const tableConfig = {
      header: [
        {
          title: '修改前内容',
          dataIndex: 'optBeforeData',
          render: (text: string, row: any) => getOptData(text, row, 'optBeforeData'),
        },
        {
          title: '修改后内容',
          dataIndex: 'optAfterData',
          render: (text: string, row: any) => getOptData(text, row, 'optAfterData'),
        },
      ],
      data: [detailData],
    };

    return (
      <div style={styles}>
        <Title>操作内容</Title>
        <CreateTable tableConfig={tableConfig} />
      </div>
    );
  };

  /**
   * 申请信息
   */
  renderReviewInfo = () => {
    const { detailData } = this.props;
    const config1 = [
      { label: '一审时间', id: 'firstTime', formatTimeStamp: true },
      { label: '一审人员', id: 'firstApprover' },
      {
        label: '一审结果',
        id: 'status',
        render: (text: number) => {
          if (text <= 2) {
            return constant.MEMBER_REVIEW_AUDIT_STATUS.filter(i => i.value === text)[0].label;
          }
          return constant.MEMBER_REVIEW_AUDIT_STATUS.filter(i => i.value === 1)[0].label;
        },
      },
      { label: '一审意见', id: 'firstRemark' },
    ];

    const config2 = [
      { label: '二审时间', id: 'secondTime', formatTimeStamp: true },
      { label: '二审人员', id: 'secondApprover' },
      {
        label: '二审结果',
        id: 'status',
        render: (text: number) => {
          if (text > 2) {
            return constant.MEMBER_REVIEW_AUDIT_STATUS.filter(i => i.value === text)[0].label;
          }
          return '--';
        },
      },
      { label: '二审意见', id: 'secondRemark' },
    ];

    config1.forEach((item: StateType) => {
      if (detailData.hasOwnProperty(item.id)) {
        item.value = detailData[item.id];
      }
    });

    config2.forEach((item: StateType) => {
      if (detailData.hasOwnProperty(item.id)) {
        item.value = detailData[item.id];
      }
    });

    return (
      <div style={styles}>
        <Title>申请信息</Title>
        <InfoList config={config1} />
        <InfoList config={config2} />
      </div>
    );
  };

  /**
   * 渲染足部
   */
  renderFooter = () => {
    const { handleCancel, handleDetailReview, isReview } = this.props;
    let footerOptions = [
      {
        id: 'reset',
        name: '取消',
        auth: true,
        default: 'button',
        type: 'default',
        event: {
          click: handleCancel,
        },
      },
    ];
    constant.MEMBER_REVIEW_CHECK_TYPE.forEach((item, index) => {
      if (!isReview) {
        // @ts-ignore
        footerOptions = [].concat(footerOptions, [
          {
            id: 'submit',
            name: item.label,
            auth: 'agent-review-enabled',
            default: 'button',
            loading: this.state[`loading${index + 1}`],
            style: { background: item.color, borderColor: item.color },
            event: {
              click: () => handleDetailReview(item.value),
            },
          },
        ]);
      }
    });
    return (
      <div style={{ paddingTop: '20px' }}>
        <TableTool options={footerOptions} />
      </div>
    );
  };

  render() {
    return (
      <div>
        {this.renderAccountInfo()}
        {this.renderApplyInfo()}
        {this.renderOperateInfo()}
        {this.renderReviewInfo()}
        {this.renderFooter()}
      </div>
    );
  }
}

export default Details;
